import Konva from 'konva'
import { Context } from 'konva/lib/Context'
import { ERecorderBrashColor } from './index'

/**
 * 基本画刷
 * @param stage 需要画刷对象
 * @param color 颜色
 * @param bgLayer 背景layer
 * @param layers  layer集合
 */
export const brush = (
  stage: Konva.Stage,
  color: ERecorderBrashColor,
  bgLayer: Konva.Layer,
  layers: Array<Konva.Shape | Konva.Layer>,
) => {
  const layer = bgLayer

  let isPaint = false
  let lastLine: Konva.Line
  stage.draggable(false)
  stage.on('mousedown touchstart', (e) => {
    isPaint = true
    const pos = stage.getRelativePointerPosition()
    lastLine = new Konva.Line({
      stroke: color,
      strokeWidth: 3,
      bezier: true,
      fillAfterStrokeEnabled: true,
      globalCompositeOperation: 'source-over',
      // mode === 'brush' ? 'source-over' : 'destination-out',
      // round cap for smoother lines
      lineCap: 'round',
      lineJoin: 'round',
      draggable: false,
      // add point twice, so we have some drawings even on a simple click
      points: [pos!.x, pos!.y, pos!.x, pos!.y],
    })
    layer.add(lastLine)
    layers.push(lastLine)
  })

  stage.on('mouseup touchend', () => {
    isPaint = false
  })

  // and core function - drawing
  stage.on('mousemove touchmove', (e) => {
    if (!isPaint) {
      return
    }
    // prevent scrolling on touch devices
    e.evt.preventDefault()
    const pos = stage.getRelativePointerPosition()
    const newPoints = lastLine.points().concat([pos!.x, pos!.y])
    lastLine.points(newPoints)
  })
}

/**
 *
 * 线画刷
 * @param stage 需要画刷对象
 * @param color 颜色
 * @param bgLayer 背景layer
 * @param layers  layer集合
 */
export const lineBrush = (
  stage: Konva.Stage,
  color: ERecorderBrashColor,
  bgLayer: Konva.Layer,
  layers: Array<Konva.Shape | Konva.Layer>,
) => {
  const layer = bgLayer

  let isPaint = false
  let lastLine: Konva.Line
  let startx = 0,
    starty = 0

  stage.draggable(false)
  stage.on('mousedown touchstart', (e) => {
    isPaint = true
    const pos = stage.getRelativePointerPosition()
    startx = pos!.x
    starty = pos!.y
    lastLine = new Konva.Line({
      stroke: color,
      strokeWidth: 3,
      globalCompositeOperation: 'source-over',
      // mode === 'brush' ? 'source-over' : 'destination-out',
      // round cap for smoother lines
      lineCap: 'round',
      lineJoin: 'round',
      draggable: false,
      // add point twice, so we have some drawings even on a simple click
      points: [pos!.x, pos!.y, pos!.x, pos!.y],
    })
    layer.add(lastLine)
    layers.push(lastLine)
  })

  stage.on('mouseup touchend', (e) => {
    isPaint = false
    // prevent scrolling on touch devices
    e.evt.preventDefault()
    const pos = stage.getRelativePointerPosition()
    const newPoints = lastLine.points().concat([pos!.x, pos!.y])
    lastLine.points(newPoints)
  })
  // and core function - drawing
  stage.on('mousemove touchmove', (e) => {
    if (!isPaint) {
      return
    }
    const pos = stage.getRelativePointerPosition()
    lastLine.points([startx, starty, pos!.x, pos!.y])
  })
}

/**
 *
 * 长三角形画刷
 * @param stage 需要画刷对象
 * @param color 颜色
 * @param bgLayer 背景layer
 * @param layers  layer集合
 */
export const triangleBrush = (
  stage: Konva.Stage,
  color: ERecorderBrashColor,
  bgLayer: Konva.Layer,
  layers: Array<Konva.Shape | Konva.Layer>,
) => {
  const layer = bgLayer

  let isPaint = false
  let lastShap: Konva.RegularPolygon
  stage.draggable(false)
  stage.on('mousedown touchstart', (e) => {
    isPaint = true
    const pos = stage.getRelativePointerPosition()
    lastShap = new Konva.RegularPolygon({
      x: pos!.x,
      y: pos!.y,
      stroke: color,
      sides: 3,
      radius: 20,
      strokeWidth: 3,
      draggable: false,
    })
    layer.add(lastShap)
    layers.push(lastShap)
  })

  stage.on('mouseup touchend', () => {
    isPaint = false
  })

  // and core function - drawing
  stage.on('mousemove touchmove', (e) => {
    // prevent scrolling on touch devices
    e.evt.preventDefault()
    const pos = stage.getRelativePointerPosition()
    if (!isPaint) {
      return
    }
    const x = lastShap.x()
    const y = lastShap.y()
    const lastX = pos.x - x
    const lastY = pos.y - y
    const redius = Math.sqrt((pos.x - x) ** 2 + (pos.y - y) ** 2)
    lastShap.radius(redius >= 20 ? redius : 20)
  })
}
/**
 *
 * 长方型画刷
 * @param stage 需要画刷对象
 * @param color 颜色
 * @param bgLayer 背景layer
 * @param layers  layer集合
 */
export const rectangleBrush = (
  stage: Konva.Stage,
  color: ERecorderBrashColor,
  bgLayer: Konva.Layer,
  layers: Array<Konva.Shape | Konva.Layer>,
) => {
  const layer = bgLayer

  let isPaint = false
  let lastRect: Konva.Rect
  stage.draggable(false)
  stage.on('mousedown touchstart', (e) => {
    isPaint = true
    const pos = stage.getRelativePointerPosition()
    lastRect = new Konva.Rect({
      x: pos!.x,
      y: pos!.y,
      width: 20,
      height: 20,
      // fill: '#ffffff',
      stroke: color,
      strokeWidth: 3,
      draggable: false,
    })
    layer.add(lastRect)
    layers.push(lastRect)
  })

  stage.on('mouseup touchend', () => {
    isPaint = false
  })

  // and core function - drawing
  stage.on('mousemove touchmove', (e) => {
    if (!isPaint) {
      return
    }
    // prevent scrolling on touch devices
    e.evt.preventDefault()
    const pos = stage.getRelativePointerPosition()
    const x = lastRect.x()
    const y = lastRect.y()
    const lastX = pos.x - x
    const lastY = pos.y - y
    lastRect.width(lastX > 20 ? lastX : 20)
    lastRect.height(lastY > 20 ? lastY : 20)
  })
}

/**
 *
 * 长方型画刷
 * @param stage 需要画刷对象
 * @param color 颜色
 * @param bgLayer 背景layer
 * @param layers  layer集合
 */
export const circleBrush = (
  stage: Konva.Stage,
  color: ERecorderBrashColor,
  bgLayer: Konva.Layer,
  layers: Array<Konva.Shape | Konva.Layer>,
) => {
  const layer = bgLayer

  let isPaint = false
  let lastCircle: Konva.Circle
  stage.draggable(false)
  stage.on('mousedown touchstart', (e) => {
    isPaint = true
    const pos = stage.getRelativePointerPosition()
    lastCircle = new Konva.Circle({
      x: pos!.x,
      y: pos!.y,
      // fill: '#ffffff',
      stroke: color,
      strokeWidth: 3,
      radius: 20,
      draggable: false,
    })
    layer.add(lastCircle)
    layers.push(lastCircle)
  })

  stage.on('mouseup touchend', () => {
    isPaint = false
  })

  // and core function - drawing
  stage.on('mousemove touchmove', (e) => {
    if (!isPaint) {
      return
    }
    // prevent scrolling on touch devices
    e.evt.preventDefault()
    const pos = stage.getRelativePointerPosition()
    const x = lastCircle.x()
    const y = lastCircle.y()
    const redius = Math.sqrt((pos.x - x) ** 2 + (pos.y - y) ** 2)
    lastCircle.radius(redius >= 20 ? redius : 20)
  })
}

export const clearBush = (stage: Konva.Stage) => {
  /**清除画笔状态 */
  stage.off('mousedown touchstart')
  stage.off('mouseup touchend')
  stage.off('mousemove touchmove')
}
